'use client';

import { useEffect, useState } from 'react';

interface Square {
  id: number;
  x: number;
  y: number;
  size: number;
  color: string;
  speed: number;
  direction: number;
}

// 扩展颜色列表，包含更多柔和的颜色
const colors = [
  'rgba(99, 102, 241, 0.3)',    // 明亮的靛蓝
  'rgba(168, 85, 247, 0.3)',    // 明亮的紫色
  'rgba(236, 72, 153, 0.3)',    // 明亮的粉红
  'rgba(239, 68, 68, 0.3)',     // 明亮的红色
  'rgba(245, 158, 11, 0.3)',    // 明亮的橙色
  'rgba(234, 179, 8, 0.3)',     // 明亮的黄色
  'rgba(34, 197, 94, 0.3)',     // 明亮的绿色
  'rgba(16, 185, 129, 0.3)',    // 明亮的青绿
  'rgba(6, 182, 212, 0.3)',     // 明亮的青色
  'rgba(59, 130, 246, 0.3)',    // 明亮的蓝色
  'rgba(232, 121, 249, 0.3)',   // 明亮的亮紫
  'rgba(248, 113, 113, 0.3)',   // 明亮的珊瑚
  'rgba(74, 222, 128, 0.3)',    // 明亮的草绿
  'rgba(45, 212, 191, 0.3)',    // 明亮的蓝绿
  'rgba(251, 146, 60, 0.3)',    // 明亮的橘色
];

export default function AnimatedBackground() {
  const [squares, setSquares] = useState<Square[]>([]);

  useEffect(() => {
    // 创建一个颜色数组的副本，用于随机选择
    let availableColors = [...colors];
    
    // 创建初始方块
    const initialSquares: Square[] = Array.from({ length: 15 }, (_, i) => {
      // 随机选择一个颜色并从可用颜色中移除
      const colorIndex = Math.floor(Math.random() * availableColors.length);
      const color = availableColors[colorIndex];
      availableColors.splice(colorIndex, 1);
      
      // 如果颜色用完了，重新填充
      if (availableColors.length === 0) {
        availableColors = [...colors];
      }

      return {
        id: i,
        x: Math.random() * 100,
        y: Math.random() * 100,
        size: Math.random() * 40 + 20, // 20-60px
        color,
        speed: Math.random() * 0.05 + 0.02, // 移动速度
        direction: Math.random() * Math.PI * 2, // 随机方向（弧度）
      };
    });

    setSquares(initialSquares);

    // 动画循环
    const interval = setInterval(() => {
      setSquares(prevSquares => 
        prevSquares.map(square => {
          // 计算新位置
          let newX = square.x + Math.cos(square.direction) * square.speed;
          let newY = square.y + Math.sin(square.direction) * square.speed;
          let newDirection = square.direction;

          // 碰到边界时改变方向
          if (newX <= 0 || newX >= 100) {
            newDirection = Math.PI - newDirection;
            newX = Math.max(0, Math.min(100, newX));
          }
          if (newY <= 0 || newY >= 100) {
            newDirection = -newDirection;
            newY = Math.max(0, Math.min(100, newY));
          }

          return {
            ...square,
            x: newX,
            y: newY,
            direction: newDirection,
          };
        })
      );
    }, 50); // 每50ms更新一次位置

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="fixed inset-0 overflow-hidden pointer-events-none">
      {squares.map(square => (
        <div
          key={square.id}
          className="absolute rounded-lg transition-transform duration-[50ms] ease-linear"
          style={{
            left: `${square.x}%`,
            top: `${square.y}%`,
            width: `${square.size}px`,
            height: `${square.size}px`,
            backgroundColor: square.color,
            transform: `translate(-50%, -50%) rotate(${square.direction}rad)`,
          }}
        />
      ))}
    </div>
  );
}
